//@ts-nocheck
import React from 'react';
import ReactDOM from 'react-dom';

/** 查看 99mini-react---class-hook/ireact/react/PureComponent.js*/

/**
 * PureComponent是浅比较state和props
 * */
class A extends React.PureComponent {
  state = {
    count:1
  };
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div style={{border:'1px solid blue'}}>
        child
        <div>{this.state.count}</div>
        <div>{this.props.number.count}</div>

        <button onClick={()=>this.setState({count: this.state.count + 1})}>每次返回一个新的对象+1</button>
        <button onClick={()=>this.setState((state)=>{
          state.count++;
          console.log('this.state.count:', this.state.count); /** ←你会发现count的确改变了,但由于这里返回的state对象地址没有改变,不会导致本PureComponent组件刷新*/
          return state;
        })}>每次返回相同的对象+1</button>
      </div>
    )
  }
}

class Index extends React.Component{
  state = {
    number: {
      count: 0
    }
  };
  render(){
    return (
      <div style={{border:'1px solid red'}}>
        father
        {this.state.number.count}
        {/** ↓因为PureComponent是浅比较,而下面这样返回state,其对象地址永远没有变化,故PureComponent就认为组件接受到的属性没有发生改变,也就不会刷新*/}
        <button onClick={()=>this.setState((state)=>{
          state.number.count++;
          return state;
        })}>传递给children组件的number+1</button>

        <A number={this.state.number}/>
      </div>
    )
  }
}

ReactDOM.render(<Index/>,window.root)
